@import '../app/variables.css';

.wrapper {
  display: flex;
  height: 100%;
  justify-content: space-around;
  width: 100%;
  flex-direction: column;
}

.box {
  background: var(--gradient-greyscale);
  box-shadow: none;
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
}

@media (--medium-viewport) {
  .box {
    height: 100%;
    min-height: 100%;
    border-radius: 0;
  }

  .wrapper {
    margin-right: calc(-1 * var(--box-padding-left-M));
    margin-left: calc(-1 * var(--box-padding-left-M));
    border-style: solid;
    border-width: 0 var(--box-padding-left-M);
    border-color: var(--color-grayscale-mobile-background);

    & > div {
      height: auto;
      background: var(--color-grayscale-mobile-background);

      & footer {
        padding-bottom: 0;
      }
    }
  }

  .layover {
    display: block;
    flex-direction: unset;
    position: relative;
    top: 0;
    overflow-y: scroll;
    max-height: 100vh; /* stylelint-disable-line */
    height: calc(100vh - var(--footer-height-m) - var(--header-height-m)); /* stylelint-disable-line */
    background-color: transparent;
  }
}

@media (--small-viewport) {
  .layover {
    height: calc(100vh - var(--footer-height-s) - var(--header-height-s)); /* stylelint-disable-line */
  }

  .wrapper {
    & footer {
      padding: 0 var(--box-padding-left-M);
    }
  }
}
